<template>
	<div id="app">
		<base-dialog :model="dialog.model" @close="closeDialog" :title="title">
			<template #body>
				<div class="diagMeg">{{dialog.message}}</div>
				<div class="diagText" v-if="dialog.orderNo">订单号：<span>{{dialog.orderNo}}</span> </div>
				<div class="diagText row" v-else>
					<div>技师名称：{{dialog.technicianName}}</div>
					<div class="md-ml">技师手机号：{{dialog.technicianTel}}</div>
				</div>
				<div class="diagText">通知时间：{{dialog.notifyTime}}</div>
			</template>
			<template #footer>
				<el-button @click="closeDialog">取 消</el-button>
				<el-button type="primary" @click="closeDialog">确 定</el-button>
			</template>
		</base-dialog>
		<!-- <audio  v-if="src" ref="audio" autoplay>
			<source :src="src" type="audio/mpeg">
		</audio> -->

		<!-- <audio v-if="src" controls autoplay ref="audio">
			<source :src="src">
		</audio> -->
		<router-view />
		<theme-picker />

		<audio v-if="src" ref="audio" :src="src" autoplay controls />
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import ThemePicker from "@/components/ThemePicker";
	import store from '@/store/index.js';
	// import {scoket} from '/store/index.js'
	export default {
		name: "App",
		components: {
			ThemePicker
		},
		data() {
			return {
				that: this,
				title: '通知',
				src: '',
				secChack: null,
				autoplay: false,
				dialog: {
					model: false,
					message: '',
					type: '',
					orderNo: '',
					notifyTime: ''
				}
			}
		},
		computed: {
			// ...mapState(['store/message','notifyTime','technicianName','technicianTel','type','orderNo']),
			getWsMsg() {
				return this.$store.state.scoket.timestamp
			},
			getTecMsg() {
				// ...mapState(['scoket/timestampOrder']),
				return this.$store.state.scoket.timestampOrder
			},
		},
		watch: {
			getWsMsg: {
				handler(newVal, old) {
					// $.secChack = newVal
					if (newVal) {
						let $ = this.that
						console.log("监听getWsMsg", 'xing', newVal, 'jiu', old, store.getters.voiceUrl)
						$.src = store.getters.voiceUrl
						this.$nextTick(() => {
							const audio = this.$refs.audio
							audio.src = $.src
							audio.autoplay = true
							audio.play()

							console.log('this.srcthis.src', audio, $.src)
							// this.aplayAudio()
						})
					}
				},
				deep: true,
				immediate: true
			},
			getTecMsg: {
				handler(newVal, old) {
					if (newVal) {
						let $ = this.that
						console.log("监听getTecMsg", 'xing', newVal, 'jiu', old, $.notifyTime)
						this.$nextTick(() => {
							$.dialog.model = true
							$.dialog.message = store.getters.message
							$.dialog.type = store.getters.type
							$.dialog.orderNo = store.getters.orderNo
							$.dialog.notifyTime = store.getters.notifyTime
							console.log($.dialog)
						})
					}
				},
				immediate: true
			},
			secChack: {
				handler(newVal, old) {
					if (newVal) {
						let $ = this.that
						this.$nextTick(() => {
							$.dialog.model = true
						})
					}
				},
			}
		},
		mounted() {
			// this.src =this.$store.state.scoket.voiceUrl

			// this.speechInit()
			//全局发送消息
			// Vue.prototype.socket = socket.sendMsg
			// this.handleBeforePlay()
		},
		created() {
			this.$nextTick(() => {
				console.log(store.state.scoket)
			})
		},
		methods: {
			closeDialog() {
				this.dialog.model = false
			},
			aplayAudio(src) {
				let $ = this.that
				// $.autoplay = true;
				// $.srcs = ''
				// console.log(5844848, $.srcs, store.getters.voiceUrl)
				// const audio = this.$refs.audio
				const audio = new Audio()
				audio.src = src;
				audio.autoplay = true
				// audio.play();
				// audio.play()
				console.log('this.srcthis.src', audio)
			}
		}
	};
</script>
<style scoped lang="scss">
	@import url('assets/css/publicSty.css');

	#app .theme-picker {
		display: none;
	}

	.diagMeg {
		font-weight: 600;
	}

	.diagText {
		margin: 8px 0;
		font-size: 12px;

		span {
			color: #67b1ff;
		}
	}

	.md-ml {
		margin-left: 20px;
	}
</style>